<template>
	<view class=""
		:style="'background: url(' + imgData.vipBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title="VIP充值" bgColor="transparent" :fixed="false" :autoBack="true" leftIconColor="#fff"
			:titleStyle="{'color':'#fff'}"></u-navbar>

		<!-- <view class="p-30">
			<image src="/static/img/21.png" mode="widthFix" style="width: 100%;height: 200rpx;">
			</image>
		</view> -->

		<view class="content p-30" style="margin-top: 400rpx;" v-if="configData.program == 1">
			<u-tabs :list="list" lineWidth="20" lineHeight="7" :lineColor="'url('+lineBg+') 100% 100%'" :activeStyle="{
			        color: '#FFF1D6',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#FFF1D6',
			        transform: 'scale(1)'
			    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :current="current"
				@change="e => change(e.index)"">
			</u-tabs>
			<view class=" mt-30">
				<u-swiper1 radius="10" keyName="image" bgColor='transparent' previousMargin="20" nextMargin="20"
					:list="list" height="150" :autoplay="false" :current="current"
					@change="e => change(e.current)"></u-swiper1>
		</view>

		<view class="submit" @click="submit">
			<u-button :loading="loading" color="linear-gradient( 270deg, #FADEB2 0%, #EBB25A 100%)"
				:customStyle="{'color':'#000'}" shape="circle" text="立即开通"></u-button>
		</view>
	</view>

	<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		vip,
		getvip
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				loading: false,

				list: [],
				current: 0,
			}
		},
		onLoad(e) {
			if(e.current) this.current = e.current
			// this.initData()
			this.initData();
		},
		methods: {
			initData() {
				vip().then(res => {
					console.log('res', res);
					this.list = res
				})
			},
			change(e) {
				console.log(e);
				this.current = e;
			},
			submit() {
				let vm = this;
				let arr = this.list[this.current];
				console.log('arr', arr);
				// return false;
				// if (arr.length == 0) {
				// 	this.$u.toast('请选择');
				// 	return false;
				// }
				getvip({
					'id': arr.id
				}).then(async res => {
					console.log(res);
					let ret = await this.paydata(res);
					if (ret) {
						vm.$refs.uToast.show({
							type: 'success',
							message: '支付成功',
							complete() {
								uni.hideLoading();
								vm.loading = false;
								uni.redirectTo({
									url: '/pages/mine/index'
								})
							}
						})
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: '支付失败',
							complete() {
								uni.hideLoading();
								vm.loading = false;
								vm.initData();
							}
						})
					}
				})
			},
				
		}
	}
</script>
<style lang="scss" scoped>
	// :deep() {
	// 	.u-swiper {
	// 		background-color: transparent;
	// 	}
	// }

	.content {
		background: #34333D;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		min-height: 1000rpx;
		padding-bottom: 120rpx;
	}

	.submit {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		width: 100%;
		background-color: transparent;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 99;
	}
</style>